.user-setting-page {
  .user-setting-page-content {
    display: flex;
    align-items: stretch;

    .user-setting-page-side {
      width: 225px;
      border-right: solid 1px plv(border-color);
      box-sizing: border-box;

      .user-setting-page-tab-item {
        line-height: 3em;
        color: plv(text-1);
        display: flex;
        align-items: center;
        transition: all ease 300ms;
        cursor: pointer;

        @include comp(icon) {
          margin-right: 0.5em;
        }

        &:hover {
          background-color: plv(secondary-2);
        }

        &.user-setting-page-tab-item-active {
          color: plv(primary-6);
          background-color: plv(primary-light-2);
        }

        & + .user-setting-page-tab-item {
          margin-top: 0.5em;
        }
      }
    }

    .user-setting-page-body {
      flex: 1;

      .user-setting-page-body-title {
        font-size: 1.5em;
        color: plv(text-1);
      }
    }

    .user-setting-page-basic {
      display: flex;
      align-items: stretch;

      .user-setting-page-basic-left {
        width: 400px;
      }

      .user-setting-page-basic-right {
        flex: 1;

        & > div {
          display: inline-flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          & > .#{componentName(icon)}, & > img {
            height: 2.5em;
            width: 2.5em;
            border-radius: 100px;
            font-size: 2.5em;
            margin-bottom: 0.5em;
            background-color: plv(secondary-2);
          }
        }
      }
    }
  }
}

.app-container {
  @include sizeMixin(app-container, ()) {
    .user-setting-page {
      .user-setting-page-side {
        padding: $margin 4px;

        .user-setting-page-tab-item {
          padding: 0 calc(#{$margin} / 2);
          border-radius: $border-radius;
        }
      }

      .user-setting-page-body {
        padding: $margin;

        & > div {
          padding: $margin 0;
        }

        .user-setting-page-basic {

          .user-setting-page-basic-left {
            margin-right: calc(#{$margin} * 3);
          }
        }

        .user-setting-page-security {
          .user-setting-page-security-item {
            display: flex;
            align-items: stretch;
            border-bottom: solid 1px plv(border-color);
            padding: $margin $margin $margin 0;

            .user-setting-page-security-item-icon {
              width: 2em;
              opacity: 0.65;
            }

            & > div.user-setting-page-security-item-label {
              display: flex;
              flex-direction: column;

              & > div:first-child {
                margin-bottom: 0.5em;
                color: plv(text-1);
              }

              & > div:last-child {
                font-size: 0.9em;
                color: plv(text-3);
              }
            }

            & > div.user-setting-page-security-item-operation {
              flex: 1;
              color: plv(primary-6);
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: flex-end;
            }
          }
        }
      }
    }
  }
}
